import React from 'react';
import { Card, Row, Col, Statistic, Space } from 'antd';
import { CloudServerOutlined, ApiOutlined } from '@ant-design/icons';
import { LarkMap, PointLayer, Popup } from '@antv/larkmap';
import './styles.css';

interface PlatformData {
  id: string;
  city: string;
  connectorCount: number;
  status: 'online' | 'offline';
  location?: [number, number]; // 经度，纬度
}

const Home: React.FC = () => {
  // 模拟数据
  const statistics = {
    platformCount: 12,
    connectorCount: 36
  };

  // 模拟平台数据（添加了经纬度信息）
  const platforms: PlatformData[] = [
    { id: '1', city: '北京市', connectorCount: 8, status: 'online', location: [116.4074, 39.9042] },
    { id: '2', city: '上海市', connectorCount: 6, status: 'online', location: [121.4737, 31.2304] },
    { id: '3', city: '广州市', connectorCount: 4, status: 'online', location: [113.2644, 23.1291] },
    { id: '4', city: '深圳市', connectorCount: 5, status: 'online', location: [114.0579, 22.5431] },
    { id: '5', city: '杭州市', connectorCount: 3, status: 'offline', location: [120.1551, 30.2741] },
    { id: '6', city: '南京市', connectorCount: 4, status: 'online', location: [118.7969, 32.0603] },
    { id: '7', city: '成都市', connectorCount: 3, status: 'online', location: [104.0665, 30.5723] },
    { id: '8', city: '武汉市', connectorCount: 2, status: 'online', location: [114.3055, 30.5928] },
    { id: '9', city: '西安市', connectorCount: 1, status: 'offline', location: [108.9402, 34.3416] },
    { id: '10', city: '重庆市', connectorCount: 3, status: 'online', location: [106.5516, 29.5630] },
    { id: '11', city: '天津市', connectorCount: 4, status: 'online', location: [117.2010, 39.0842] },
    { id: '12', city: '苏州市', connectorCount: 2, status: 'online', location: [120.5853, 31.2989] }
  ];

  return (
    <div className="home-container">
      {/* 顶部统计模块 */}
      <Row gutter={[16, 16]} className="stats-row">
        <Col xs={24} sm={12}>
          <Card>
            <Statistic
              title="基础支撑平台总数"
              value={statistics.platformCount}
              prefix={<CloudServerOutlined />}
              valueStyle={{ color: '#1890ff' }}
            />
          </Card>
        </Col>
        <Col xs={24} sm={12}>
          <Card>
            <Statistic
              title="接入连接器总数"
              value={statistics.connectorCount}
              prefix={<ApiOutlined />}
              valueStyle={{ color: '#52c41a' }}
            />
          </Card>
        </Col>
      </Row>

      

      {/* 平台列表模块 */}
      <Card 
        title="基础支撑平台" 
        className="platforms-card"
        extra={<a href="/platform-integration/platform-list">查看更多</a>}
      >
        <div className="platform-container">
          <Row gutter={[24, 24]} className="platform-grid">
            {platforms.map(platform => (
              <Col xs={24} sm={12} md={8} lg={4} key={platform.id}>
                <Card 
                  className={`platform-item ${platform.status}`}
                  hoverable
                >
                  <div className="platform-content">
                    <div className="platform-header">
                      <h3>{platform.city}</h3>
                      <span className={`status-dot ${platform.status}`} />
                      <span> {platform.status === 'online' ? '在线' : '离线'}</span>
                    </div>
                    <div className="platform-info">
                      <Space direction="vertical" size="small">
                        <div className="connector-count">
                          <ApiOutlined /> {platform.connectorCount} 个连接器
                        </div>
                      </Space>
                    </div>
                  </div>
                </Card>
              </Col>
            ))}
          </Row>
        </div>
      </Card>
    </div>
  );
};

export default Home; 